<template>
  <div class="content-wrapper">

    <!-- 内容头部 -->
    <section class="content-header">
      <h1>
        订单管理
        <small>管理您的订单</small>
      </h1>
      <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-calendar-minus-o"></i> 订单管理</a></li>
        <li><a href="#"> 订单详情</a></li>
        <li class="active">修改订单</li>
      </ol>
    </section>
    <!-- 内容头部 /-->

    <!-- 正文区域 -->
    <section class="content">
      <!-- 修改密码 -->
      <div class="box box-primary">
        <div class="box-header with-border">
          <h3 class="box-title">修改订单</h3>
          <router-link :to="'/main/orderContent/'+order.id">
            <button type="button" class="btn btn-success pull-right">查看订单中的商品</button>
          </router-link>
        </div>
        <!-- /.box-header -->
        <!-- form start -->
        <form role="form">
          <div class="box-body">
            <div class="form-group">
              <label for="orderId">订单Id</label>
              <input type="text" class="form-control" id="orderId" placeholder="订单Id" :value="order.id" data-cip-id="orderId" disabled>
            </div>
            <div class="form-group">
              <label for="orderTime">下单时间</label>
              <input type="text" class="form-control" id="orderTime" placeholder="下单时间" :value="order.orderTime" data-cip-id="orderTime" disabled>
            </div>
            <div class="form-group">
              <label for="sendTime">寄出时间</label>
              <input type="text" class="form-control" id="sendTime" placeholder="寄出时间" :value="order.sendTime" data-cip-id="sendTime">
            </div>
            <div class="form-group">
              <label for="orderUser">下单者名称</label>
              <input type="text" class="form-control" id="orderUser" placeholder="下单者名称" :value="order.orderUser" data-cip-id="orderUser">
            </div>
            <div class="form-group">
              <label for="orderLocation">收货地址</label>
              <input type="text" class="form-control" id="orderLocation" placeholder="收货地址" :value="order.orderLocation" data-cip-id="orderLocation">
            </div>
            <div class="form-group">
              <label for="orderPhone">下单者联系电话</label>
              <input type="text" class="form-control" id="orderPhone" placeholder="下单者联系电话" :value="order.orderPhone" data-cip-id="orderPhone">
            </div>
            <div class="form-group">
              <label for="price">总价</label>
              <input type="number" class="form-control" id="price" placeholder="总价" :value="order.price" data-cip-id="price" disabled>
            </div>
            <div class="form-group">
              <label for="stats">订单状态</label>
              <select class="form-control js-example-basic-single" data-cip-id="stats" id="stats"
                      :value="order.status">
                <option value="待处理">待处理</option>
                <option value="拣货中">拣货中</option>
                <option value="待发货">待发货</option>
                <option value="已发货">已发货</option>
              </select>
            </div>
            <div class="form-group">
              <label for="operator">拣货员</label>
              <input type="text" class="form-control" id="operator" placeholder="拣货员" :value="order.operator" data-cip-id="operator">
            </div>
            <div>
              <p class="alert alert-danger hidden" id="message">message</p>
            </div>
          </div>
          <!-- /.box-body -->
          <div class="box-footer">
            <button type="button" class="btn btn-primary" @click="change">提交修改</button>
          </div>
        </form>
      </div>
      <!-- /.row -->
    </section>
    <!-- 正文区域 /-->

  </div>
</template>

<script>
export default {
  name: "ChangeOrder",
  data(){
    return {
      order: this.GLOBAL.appData.orderList[(this.$route.params.id)-1]
    }
  },
  mounted() {
    $(document).ready(function () {
      // 选择框
      $(".select2").select2();

      // WYSIHTML5编辑器
      $(".textarea").wysihtml5({
        locale: 'zh-CN'
      });
    });


    // 设置激活菜单
    function setSidebarActive(tagUri) {
      var liObj = $("#" + tagUri);
      if (liObj.length > 0) {
        liObj.parent().parent().addClass("active");
        liObj.addClass("active");
      }
    }


    $(document).ready(function () {
      // 激活导航位置
      setSidebarActive("change-order");
    });
  },
  methods:{
    change(){
      var orderUser= document.getElementById("orderUser");
      var orderLocation= document.getElementById("orderLocation");
      var orderPhone=document.getElementById("orderPhone");
      var stats=document.getElementById("stats");
      if (orderUser.value === "" || orderLocation.value === "" || orderPhone.value === "" || stats.value === "") {
        //输入有空值
        this.$message.warning("下单者名称、收货地址、下单者联系电话、状态码不能为空！");
      } else if (stats.value < 0 || stats.value > 3) {
        this.$message.warning("状态码只能在0~3间！");
      } else {
        this.$message.info("修改成功（模拟操作）");
        this.$router.push("/main/orderData")
      }
    }
  }
}
</script>

<style scoped>

</style>
